<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>08.react中事件函数的event对象</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      class EventBindParams extends React.Component {
        constructor() {
          super()
        }
        testClick1(event) {
          // 众所周知，js事件触发的时候浏览器会回给这些回调函数一个参数叫事件对象(这个对象就一个，不断的改值而已)
          console.log("testClick1", event) // 但是这里不一样，这是react截取浏览器事件对象再包装了一个对象返回
          // 但是大家想一下，这个要怎么传递参数？
        }
        testClick2(event, name, age) {
          console.log("testClick2", event)
          // 你会发现这个参数是错误的？
          console.log("testClick2-name,age:", name, age)
        }
        testClick3(event, name, age) {
          console.log("testClick3", event)
          // 参数正常
          console.log("testClick3-name,age:", name, age)
        }
        render() {
          return (
            <div>
              <button onClick={this.testClick1}>点击我1</button>
              <button
                onClick={this.testClick2.bind(this, "实参name", "实参age")}
              >
                点击我2
              </button>
              {/* 推荐这种方法 */}
              <button
                onClick={(event) => {
                  this.testClick3(event, "实参name", "实参age")
                }}
              >
                点击我3-推荐
              </button>
            </div>
          )
        }
      }

      const root = ReactDOM.createRoot(document.getElementById("root"))
      root.render(<EventBindParams />)
    </script>
  </body>
</html>
